<template>
    <a-spin :spinning="confirmLoading">
        <j-form-container :disabled="formDisabled">
            <a-form :form="form" slot="detail">
                <a-row>
                    <a-col :span="24">
                        <a-form-item label="处置单位" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <select-company-list :companyId="model.companysId"
                                                 @change="changeCompany"></select-company-list>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24" v-if="!this.model.id">
                        <a-form-item label="车辆编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input v-decorator="['id']" placeholder="请输入车牌号"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="车牌号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input v-decorator="['carNumber']" placeholder="请输入车牌号"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input v-decorator="['remark']" placeholder="请输入备注"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col v-if="showFlowSubmitButton" :span="24" style="text-align: center">
                        <a-button @click="submitForm">提 交</a-button>
                    </a-col>
                </a-row>
            </a-form>
        </j-form-container>
    </a-spin>
</template>

<script>

    import { getAction, httpAction } from '@/api/manage'
    import pick from 'lodash.pick'

    import SelectCompanyList from '@/components/Jane/SelectCompanyList'

    export default {
        name: 'HcCarForm',
        components: {
            SelectCompanyList
        },
        props: {
            //流程表单data
            formData: {
                type: Object,
                default: () => {
                },
                required: false
            },
            //表单模式：true流程表单 false普通表单
            formBpm: {
                type: Boolean,
                default: false,
                required: false
            },
            //表单禁用
            disabled: {
                type: Boolean,
                default: false,
                required: false
            }
        },
        data() {
            return {
                form: this.$form.createForm(this),
                model: {},
                labelCol: {
                    xs: { span: 24 },
                    sm: { span: 5 }
                },
                wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 16 }
                },
                confirmLoading: false,
                validatorRules: {},
                url: {
                    add: '/hc/hcCar/add',
                    edit: '/hc/hcCar/edit',
                    queryById: '/hc/hcCar/queryById'
                }
            }
        },
        computed: {
            formDisabled() {
                if (this.formBpm === true) {
                    if (this.formData.disabled === false) {
                        return false
                    }
                    return true
                }
                return this.disabled
            },
            showFlowSubmitButton() {
                if (this.formBpm === true) {
                    if (this.formData.disabled === false) {
                        return true
                    }
                }
                return false
            }
        },
        created() {
            //如果是流程中表单，则需要加载流程表单data
            this.showFlowData()
        },
        methods: {
            changeCompany(value) {
                this.model.companysId = value
            },
            add() {
                this.edit({})
            },
            edit(record) {
                this.form.resetFields()
                this.model = Object.assign({}, record)
                let userInfo = this.$store.getters.userInfo
                if (userInfo.companysId) {
                    this.model.companysId = userInfo.companysId
                }
                this.visible = true
                this.$nextTick(() => {
                    this.form.setFieldsValue(pick(this.model, 'id', 'companysId', 'carNumber', 'remark'))
                    if (!this.model.id) {
                        this.form.setFieldsValue({
                            id: new Date().getTime()
                        })
                    }
                })
            },
            //渲染流程表单数据
            showFlowData() {
                if (this.formBpm === true) {
                    let params = { id: this.formData.dataId }
                    getAction(this.url.queryById, params).then((res) => {
                        if (res.success) {
                            this.edit(res.result)
                        }
                    })
                }
            },
            submitForm() {
                const that = this
                if (!this.model.companysId) {
                    this.$message.info('请选择处置单位')
                    return
                }
                // 触发表单验证
                this.form.validateFields((err, values) => {
                    if (!err) {
                        that.confirmLoading = true
                        let httpurl = ''
                        let method = ''
                        if (!this.model.id) {
                            httpurl += this.url.add
                            method = 'post'
                        } else {
                            httpurl += this.url.edit
                            method = 'put'
                        }
                        let formData = Object.assign(this.model, values)
                        httpAction(httpurl, formData, method).then((res) => {
                            if (res.success) {
                                that.$message.success(res.message)
                                that.$emit('ok')
                            } else {
                                that.$message.warning(res.message)
                            }
                        }).finally(() => {
                            that.confirmLoading = false
                        })
                    }

                })
            },
            popupCallback(row) {
                this.form.setFieldsValue(pick(row, 'id', 'companysId', 'carNumber', 'remark'))
            }
        }
    }
</script>
